<template>
	<view class="box">
		<uNavbar title="" bgColor="transparent"></uNavbar>
		<view class="user">
			<image :src="user.head_img" mode="aspectFill"></image>
			<view class="tel">
				{{user.nickname}}
			</view>
			<view class="role">
				用户身份：{{identityAll.name}}
			</view>
		</view>
		<view class="tab-nav flex_ld_b">
			<view class="tab-list-item" v-for="item in toggleList" :key="item.id" @click="clickToggleHandle(item)">
				<view :class="{ active: item.label==selval}" class="text">{{ item.label }}</view>
			</view>
		</view>
		<view class="wrap">
			<image class="vip" src="../../static/image/vip.png" mode=""></image>
			<view class="tit">
				权益介绍
			</view>
			<view class="item_wrap">
				<view class="item" v-for="item in list" :key="item.id">
						<image :src="item.equity_images" mode="aspectFill"></image>
						<text class="text1">{{item.equity_name}}</text>
						<text class="text2">{{item.equity_value}}</text>
				</view>

			</view>
		</view>
		<view class="tip_wrap" v-if="selnumber==0||selnumber==1">
			<view class="tit">
				我的团队
			</view>
			<view class="tag">
				每日凌晨23:59分更新一次数据(不计入当天数据)
			</view>
			<view class="line">
				
			</view>
			<view class="itemtip">
				<view class="itemtext">
					团队业绩总额 <text>（近7天）</text>
				</view>
				<view class="itemtext">
					￥{{teamlist.seven_count}}
				</view>
			</view>
			<view class="itemtip">
				<view class="itemtext">
					团队业绩总额 <text>（近30天）</text>
				</view>
				<view class="itemtext">
					￥{{teamlist.thirty_count}}
				</view>
			</view>
			<view class="itemtip">
				<view class="itemtext">
					团队卡牌战力总值 <text>（近7天）</text>
				</view>
				<view class="itemtext">
					{{teamlist.team_ce}}
				</view>
			</view>
			<view class="itemtip">
				<view class="itemtext">
					团队有限用户 <text>（持有亭长或县尉）</text>
				</view>
				<view class="itemtext">
					{{teamlist.team_valid_number}}
				</view>
			</view>
			<view class="itemtip">
				<view class="itemtext">
					团队郡丞 <text>（个数）</text>
				</view>
				<view class="itemtext">
					{{teamlist.community_branches_number}}
				</view>
			</view>
			<view class="itemtip">
				<view class="itemtext">
					团队郡守 <text>（个数）</text>
				</view>
				<view class="itemtext">
					{{teamlist.service_center_number}}
				</view>
			</view>
			
			
		</view>
		<view class="apply_wrap"  v-if="selnumber==2||selnumber==3||selnumber==4">
			<view class="tit">
				申请条件
			</view>
			<view class="item_apply" v-for="item in applylist " :key="item.str" >
				<text>{{item.str}}</text>
				<view class="num">
					{{item.suc}}/{{item.condition}} <image v-if="item.is_suc==0" src="../../static/image/no_sel.png" mode=""></image><image v-if="item.is_suc==1" src="../../static/image/yes_sel.png" mode=""></image>
				</view>
			</view>

		</view>
		<view class="btn"    v-if="selnumber==2||selnumber==3||selnumber==4" :style="isapply==1? 'opacity:1':'opacity:0.6' " @click="submit">
			提交申请
		</view>
		<view class="information entry"  v-if="selnumber==2||selnumber==3||selnumber==4">
			<view class="zhengce flex_c" @click="toggleAgree">
				<image src="../../static/icon/sel.png" mode="" v-if="selectStatus"></image>
				<image src="../../static/icon/i_checkbox1.png" mode="" v-if="!selectStatus"></image>
			</view>
			<view class="information_box flex_dq">
				<text>阅读并且同意</text>
				<text class="underline" @click.stop="showAgreements">《郡丞&郡守&刺史管理协议》</text>
			</view>
		</view>
		<view class="empty3" v-if="selnumber==4||selnumber==0||selnumber==1||selnumber==2">
			
		</view>
		<view class="text_wrap" v-if="selnumber==3">
			<view class="tit">
				温馨提示
			</view>
			<text>1、郡丞+郡守 权益不叠加奖励 
			例如:同时符合郡丞+郡守条件的团队，只发放郡守相关奖励</text>
		</view>
		<u-popup :show="tipShow" mode="center" @close="tipShow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36">提示</text>
				<text class="prompt_tit">{{content}}</text>
		
				<view class="prompt_ntm" @click="tipShow=false">
					<text>我已知晓</text>
				</view>
				<view class="empty"></view>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import {equityList,myTeam,applicationCondition,upEquity} from "../../api/other.js"
	import {getuserinfo} from "../../api/index.js"
	export default {
		data() {
			return {
				toggleList: [{
						label: '亭长',
						select: true,
						selnum: 0
					},
					{
						label: '县尉',
						select: false,
						selnum: 1
					},
					{
						label: '郡丞',
						select: false,
						selnum: 2
					},
					{
						label: '郡守',
						select: false,
						selnum: 3
					},
					{
						label: '刺史',
						select: false,
						selnum: 4
					},
				],
				selval:"亭长",
				selnumber:0,
				isapply:0,
				selectStatus:false,
				tipShow:false,
				list:[],
				lists:[],
				teamlist:[],
				user:{},
				identityAll:{},
				applylist:[],
				content:""
			}
		},
		onLoad() {
			this.getlist()
			this.getteam()
			this.getuser()
		},
		methods: {
			getapplicationCondition(type){
				applicationCondition({
					type:type
				}).then(res=>{
					this.content=res.data.message
					this.isapply=res.data.is_success
					this.applylist=res.data.list
				})
			},
			getuser(){
				getuserinfo().then(res=>{
					this.user=res.data
					this.identityAll = res.data.identity
					this.selval=this.identityAll.name
					if(this.selval=="亭长"){
						this.selnumber=0
						this.list=this.lists.resident_equity
					}
					if(this.selval=="县尉"){
						this.selnumber=1
						this.list=this.lists.city_equity
					}
					if(this.selval=="郡丞"){
						this.selnumber=2
						this.list=this.lists.community_equity
						this.getapplicationCondition(1)
					}
					if(this.selval=="郡守"){
						this.selnumber=3
						this.list=this.lists.service_equity
						this.getapplicationCondition(2)
					}
					if(this.selval=="刺史"){
						this.selnumber=4
						this.list=this.lists.governor_equity
						this.getapplicationCondition(3)
					}
					console.log(this.selnumber,999)
					console.log(this.selval,999)
				})
			},
			getteam(){
				myTeam().then(res=>{
					this.teamlist=res.data
				})
			},
			getlist(){
				equityList().then(res=>{
					this.lists=res.data
					// this.list=res.data.resident_equity
					console.log(this.list,"列表")
					console.log(res.data)
				})
			},
			clickToggleHandle(ele) {
				this.toggleList.forEach(item => item.select = false)
				this.currLabel = ele.label
				ele.select = true
				console.log(ele)
				this.selnumber=ele.selnum
				this.selval = ele.label
				if(this.selval=="亭长"){
					this.list=this.lists.resident_equity
				}
				if(this.selval=="县尉"){
					this.list=this.lists.city_equity
				}
				if(this.selval=="郡丞"){
					this.list=this.lists.community_equity
					this.getapplicationCondition(1)
				}
				if(this.selval=="郡守"){
					this.list=this.lists.service_equity
					this.getapplicationCondition(2)
				}
				if(this.selval=="刺史"){
					this.list=this.lists.governor_equity
					this.getapplicationCondition(3)
				}
				console.log(this.list,"22")
				console.log(this.selval)
			},
			toggleAgree(){
				this.selectStatus=!this.selectStatus
				console.log(this.selectStatus)
			},
			submit(){
				if(!this.selectStatus){
					uni.$u.toast("请先勾选协议")
				}else if(!this.isapply){
					this.tipShow=true
					// this.content="申请条件未达标"
				} else{
					upEquity({
						type:this.selnumber-1
					}).then(res=>{			
							this.content=res.msg
							this.tipShow=true
						console.log(res,"申请")
					})
				}
			},
			showAgreements(){
				uni.navigateTo({
					url:"/pagesMy/setting/community"
				})
			}
			
		}
	}
</script>
<style>
	page {
		background: #111111;
		;
	}
</style>

<style lang="scss" scoped>
	@font-face {
		font-family: 'iconfont';
		src: url("~@/iconfont/almm.ttf");
	}

	.box {
		width: 750rpx;
		height: 1624rpx;
		// background-color: #211E38;
		background-image: url("../../static/image/sjqybg.png");
		background-size: 750rpx 1250rpx;
		background-repeat: no-repeat;
		position: relative;
	}

	.user {
		width: 750rpx;
		// height: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		>image {
			width: 124rpx;
			height: 124rpx;
			border: 3rpx solid #FFFFFF;
			border-radius: 50%;
		}

		.tel {
			font-weight: 500;
			font-size: 40rpx;
			color: #FFFFFF;
			margin-top: 22rpx;
		}

		.role {
			margin-top: 20rpx;
			font-family: iconfont;
			font-weight: 700;
			font-size: 32rpx;
			color: #F2C386;
		}
	}

	.tab-nav {
		width: 750rpx;
		height: 100rpx;
		// background-color: #262241;
		// margin-left: 20rpx;
		display: flex;
		align-items: center;
		// position: fixed;
		// top: 100rpx;
		// z-index: 999;

		.tab-list-item {
			position: relative;
			// width: 180rpx;
			margin-left: 20rpx;

			.text {
				display: flex;
				justify-content: center;
				align-items: center;

				padding: 20rpx;
				height: 52rpx;
				opacity: 1;
				font-weight: 400;
				text-align: center;
				font-size: 32rpx;
				color: #766A5A;
			}

			.active {
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #F2C386;
			}
		}
	}
	.wrap{
		width: 670rpx;
		// height: 696rpx;
		background: linear-gradient( 135deg, #282625 2%, #131211 97%);
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		border: 2rpx solid #5D5855;
		margin: 0 auto;
		position: relative;
		margin-top: 60rpx;
		padding-bottom: 50rpx;
		.vip{
			width: 202rpx;
			height: 184rpx;
			position: absolute;
			right: 30rpx;
			top: -34rpx;
		}
		.tit{
			font-family: iconfont;
			font-weight: 700;
			font-size: 40rpx;
			color: #F2C386;
			padding-top: 46rpx;
			margin-left: 46rpx;
		}
		.item_wrap{
			width: 670rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			margin-top: 50rpx;
			.item{
				width: 180rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 20rpx;
				margin-left: 30rpx;
				>image{
					width: 88rpx;
					height: 88rpx;
					border-radius: 10rpx;
				}
				.text1{
					font-weight: 500;
					font-size: 28rpx;
					color: #F2C386;
					margin-top: 14rpx;
				}
				.text2{
					font-weight: 400;
					font-size: 24rpx;
					color: #9F825D;
					text-align: center;
				}
			}
			
		}
	}
	.tip_wrap{
		width: 672rpx;
		height: 762rpx;
		margin: 0 auto;
		margin-top: 50rpx;
		background-image: url("/static/image/teambg.png");
		background-size: 672rpx 762rpx;
		
		// margin-bottom: 66rpx;
		.tit{
			padding-top: 46rpx;
			margin-left: 40rpx;
			font-weight: 400;
			font-size: 36rpx;
			color: #F2C386;
		}
		.tag{
			font-weight: 400;
			font-size: 26rpx;
			color: #9F825D;
			margin-left: 40rpx;
			margin-top: 18rpx;
		}
		.line{
			width: 620rpx;
			height: 0rpx;
			border: 2rpx dashed rgba(255,255,255,0.15);
			margin-top: 50rpx;
			margin-left: 28rpx;
		}
		.itemtip{
			width: 592rpx;
			margin-left: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 40rpx;
			.itemtext{
				font-weight: 400;
				font-size: 32rpx;
				color: #F2C386;
				>text{
					font-weight: 400;
					font-size: 26rpx;
					color: #9F825D;
				}
			}
		}
	}
	.apply_wrap{
		width: 670rpx;
		// height: 350rpx;
		padding-bottom: 50rpx;
		background: linear-gradient( 135deg, #282625 2%, #131211 97%);
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		border: 2rpx solid #5D5855;
		margin: 0 auto;
		margin-top: 52rpx;
		.tit{
			padding-top: 46rpx;
			margin-left: 20rpx;
			font-weight: 400;
			font-size: 36rpx;
			color: #F2C386;
		}
		.item_apply{
			width: 640rpx;
			height: 60rpx;
			margin-left: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;
			>text{
				width: 420rpx !important;
				font-weight: 400;
				font-size: 22rpx;
				color: #C8A270;
				// max-width: 450rpx;
				// width: 500rpx;
				 // white-space: nowrap; /* 文本不换行 */
				 //  overflow: hidden; /* 溢出隐藏 */
				 //  text-overflow: ellipsis; /* 使用省略号 */
			}
			.num{
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				margin-right: 8rpx;
				>image{
					width: 28rpx;
					height: 28rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	.btn{
		position: relative;
		width: 670rpx;
		height: 88rpx;
		background: linear-gradient( 360deg, #FDBA77 0%, #FDBA77 0%, #F9E7C7 66%);
		border-radius: 438rpx 438rpx 438rpx 438rpx;
		opacity: 0.6;
		margin: 0 auto;
		margin-top: 62rpx;
		font-weight: 500;
		font-size: 36rpx;
		color: #824F17;
		text-align: center;
		line-height: 88rpx;
	}
	.text_wrap{
		width: 668rpx;
		margin: 0 auto;
		font-weight: 400;
		font-size: 26rpx;
		color: rgba(242,195,134,0.6);
		padding-bottom: 50rpx;
		.tit{
			margin-top: 40rpx;
			// margin-left: 40rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #F2C386;
		}
		
	}
	.information {
		width: 80%;
		margin: 40rpx auto 0;
		display: flex;
		align-items: center;
		visibility: inherit;
	}
	
	.information_box {
		display: flex;
		align-items: flex-start;
		margin-left: 10rpx;
	}
	
	.information_box>text {
		color: #A6A5AF;
		font-size: 24rpx;
	}
	
	.information_box>text:nth-child(2n) {
		color: #F2C386 !important;
	}
	.zhengce>image {
		width: 32rpx;
		height: 32rpx;
	}
			.prompt {
				width: 600rpx;
				min-height: 400rpx;
				background: #1B1918;
				margin: 0 auto;
				border-radius: 20rpx;
				color: #ffffff;
				padding-top: 30rpx;
			}
		
			.prompt>text {
				margin-top: 40rpx;
			}
		
			.prompt_tit {
				margin: 0 30rpx;
				font-size: 28rpx;
				color: #A6A5AF;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
		
			.prompt_ntm {
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 400;
				font-size: 30rpx;
				color: #824F17;
				width: 414rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: linear-gradient( 1deg, #F9E7C7 0%, #FDBA77 66%);
				border-radius: 28rpx;
				margin-top: 80rpx;
			}
</style>